<template>
  <!-- 标签 -->
  <ul class="tag-list">
    <li
      class="tag-item"
      :class="['tag_' + tag.value, selectable ? 'selectable' : undefined]"
      v-for="tag in TAG_LIST"
      :key="tag.value"
      @click.stop="activedChange(tag.value)"
    >
      <template v-if="selectable">
        <a-checkbox :model-value="activedTag == tag.value" />
        <span class="ml-2"> {{ tag.label }}({{ data['num' + tag.value] || 0 }})</span>
      </template>
      <span v-else>{{ tag.label }}</span>
    </li>
  </ul>
</template>

<script lang="ts">
  import { ref } from 'vue'

  export default {
    name: 'StockTagList',
    props: {
      data: {
        type: Object,
        default: () => {
          return {}
        },
      },
      selectable: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['change'],
    setup(props, { emit }) {
      // 0:空闲车辆,1:线下订单占用,2:渠道订单占用,3:维修、保养、年检,4:逾期未还,5:车辆冲突,6:丢失
      // 2024-05-10新增：7:临时占用,8:已借出,9:借出未还
      const TAG_LIST = [
        {
          value: '0',
          label: '无占用车辆',
          total: 0,
        },
        {
          value: '1',
          label: '线下订单占用',
          total: 0,
        },
        {
          value: '2',
          label: '渠道订单占用',
          total: 0,
        },
        {
          value: '7',
          label: '临时占用',
          total: 0,
        },
        {
          value: '8',
          label: '已借出',
          total: 0,
        },
        {
          value: '3',
          label: '维修',
          total: 0,
        },
        {
          value: '4',
          label: '逾期未还',
          total: 0,
        },
        {
          value: '5',
          label: '车辆冲突',
          total: 0,
        },
        {
          value: '9',
          label: '借出未还',
          total: 0,
        },
      ]
      const activedTag = ref()

      // 切换
      const activedChange = (key: string) => {
        if (!props.selectable) return
        if (activedTag.value == key) {
          activedTag.value = undefined
        } else {
          activedTag.value = key
        }
        emit('change', activedTag.value)
      }

      const reset = () => {
        activedTag.value = undefined
      }

      return {
        TAG_LIST,
        activedTag,
        reset,
        activedChange,
      }
    },
  }
</script>

<style lang="less" scoped>
  .tag-list {
    display: flex;
    flex-wrap: wrap;
    @import '../cz_tag.less';
    margin-bottom: 14px;

    .tag-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 20px 6px 0;
      height: 30px;
      min-width: 124px;
      padding: 0 16px;
      // 文字
      font-size: 14px;
      font-weight: 400;
      color: #1d2129;

      &::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        width: 4px;
        height: 30px;
      }
      &.selectable {
        cursor: pointer;
      }
    }
  }
</style>
